<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
    width: 500px;
    height: 200px;
    background-color: lightblue;
}
.box2{
    width: 500px;
    height: 200px;
    background-color: lightgreen;
}
</style>
</head>
<body>
    
<div class="box1">mousemove事件，没有节流</div>
<div class="box2">mousemove事件，添加节流</div>

<script>
let box1 = document.querySelector('.box1')
box1.onmousemove = function (e){
    // test函数会被高频调用
    test(e)
}
function test(e){
    console.log( e.pageX, e.pageY )
}

// 节流
// 节流是规定在一个单位时间内，只能触发一次函数
// 主要用于高频事件或高频触发的函数，降低程序触发执行的频率
// 高频事件：scroll  mousemove  reset  keyup  keydown ...
let box2 = document.querySelector('.box2')

/* let timer // 记录计时器id
let lastTime // 记录上次触发时间
box2.onmousemove = function (e){
    let nowTime = Date.now()// 记录事件当前触发的时间
    // 需求：每隔500毫秒执行一次
    if (lastTime && nowTime < lastTime+500) {
        // 上次触发和当前触发间隔还没到500毫秒
        clearTimeout(timer)
        timer = setTimeout(function (){
            lastTime = nowTime// 更新上次触发时间
            test(e)
        },500)
    }
    else{
        lastTime = nowTime// 更新上次触发时间
        test(e)// 立即执行函数
    }
} */

// 函数节流
function throttle(fn,time){
    let timer // 记录计时器id
    let lastTime // 记录上次触发时间
    return function (x){// throttleTest
        let nowTime = Date.now()// 记录事件当前触发的时间
        // 需求：每隔time毫秒执行一次
        if (lastTime && nowTime < lastTime+time) {
            // 上次触发和当前触发间隔还没到time毫秒
            clearTimeout(timer)
            timer = setTimeout(function (){
                lastTime = nowTime// 更新上次触发时间
                fn(x)
            },time)
        }
        else{
            lastTime = nowTime// 更新上次触发时间
            fn(x)// 立即执行函数
        }
    }
}
let throttleTest = throttle(test,400)// 节流处理

box2.onmousemove = function (e){
    throttleTest(e)// 执行节流处理后的函数
}

// 防抖：游戏中的施法节能读秒（回城）
// 节流：游戏中的射击频率

</script>
</body>
</html>